<template>
  <div id="content" class="dark-theme result-page">
    <link href="/static/css/component/common.css" rel="stylesheet" />
    <link href="/assstatic/css/mark-page.css" rel="stylesheet" />
    <link href="/static/css/component/componentLibrary.css" rel="stylesheet" />
    <header-component
      :componentInfoHeader="componentInfoHeader"
      :showHead="showHead"
      :history="history"
      :curName="info.taskName"
      :standard="info.markStandard"
      :shortcutkeys="shortcutkeys"
      @repulseMark="repulseMark"
      @save="save"
      @submit="submit"
    ></header-component>
    <div class="content-box">
      <div class="left-content" :class="{'active': isTiling}">
        <div class="content-area">
          <div class="top">
            <div class="checkData">
              <span
                v-if="base.isMmark"
                @click="checkData(0)"
                :class="{'active': checkDataType === 0}"
              >标注</span>
              <span
                v-if="base.isCheck"
                @click="checkData(1)"
                :class="{'active': checkDataType === 1}"
              >检查</span>
              <span
                v-if="base.isQuality"
                @click="checkData(2)"
                :class="{'active': checkDataType === 2}"
              >质检</span>
            </div>
            <div class="progress" v-if="false">{{finishNum}}/{{files.length}}</div>
            <select
              v-if="false"
              name
              id
              class="screen"
              @change="switchType($event.target.value)"
              @click="$event.target.value = 3"
            >
              <option
                :selected="showType === 3"
                value="3"
                style="display: none"
              >{{showType === 0 ? "全部" : (showType === 1 ? "有标签" : "无标签")}}</option>
              <!--解决无法点击统一个的问题-->
              <option :selected="showType === 0" value="0">全部</option>
              <option :selected="showType === 1" value="1">有标签</option>
              <option :selected="showType === 2" value="2">无标签</option>
            </select>
          </div>
          <div class="info-box">
            <div
              class="item"
              v-for="(item, key) in showFiles"
              :class="{'check': item.index  === currentKey}"
              :id="'img' + item.index"
            >
              <label :for="key" class="select">
                <input
                  type="checkbox"
                  :id="key"
                  @click="setCheckList($event, item)"
                  :checked="checkList[item.index]"
                  v-if="false"
                />
              </label>
              <div class="img-box">
                <div class="img-name" :title="item.name">{{key + 1}}. {{item.name}}</div>
                <div class="img" @click="zoomImgFn(item.url)">
                  <img :src="item.url" :ref="item.index + 1" />
                  <!--@click="setKey(item.index)"  imgProxy(item,item.url,item.id) imgProxy(item,item.url,item.index)-->
                </div>
                <div class="attribute">
                  <div
                    v-for="sign in item.attribute"
                    class="sign result"
                    :style="getSignColor(sign)"
                  >
                    <!--@click="removeSign(item.index,sign)"-->
                    {{slotCache[sign] ? slotCache[sign].cname : ""}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="zoom-area" @click="isTiling = !isTiling" v-if="false">
          <span>Ⅲ</span>
        </div>
      </div>
      <div class="middle-content" v-show="!isTiling">
        <div class="big-img" v-show="!isTiling && !isCheckBox">
          <div id="picview" class="picview">
            <img :src="src" name="viewArea" id="viewArea" draggable="false" @load="loadImg" />
          </div>
        </div>
        <div class="big-img" v-show="!isTiling && isCheckBox">
          <div class="title">
            <span>已选中 {{checkListNum}} 张图片，点击右侧按钮批量添加</span>
            <span class="complete" @click="completeCheck()">完成</span>
          </div>
          <div class="img active" v-for="(items, keys) in checkList">
            <img :src="items.url" />
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="content-slot">
          <div class="slot-head">
            <div class="openSlotSelect" :class="{'active':isOpenSlot}">属性</div>
            <div class="slotSelectType" v-show="isOpenSlot">
              <span :class="{'active':slotSelectType == 1}" @click="setSlotSelectType(1)">包含</span>
              <span :class="{'active':slotSelectType == 2}" @click="setSlotSelectType(2)">不包含</span>
              <span @click="openSlot">×</span>
            </div>
          </div>
          <ul class="slot-list choose">
            <li
              v-for="(item,key,index) in slotList"
              class="list-item"
              :class="{'active':selectedSlot.indexOf(item.ename) !== -1,'selecting':isOpenSlot}"
              :title="item.cname"
              :style="{background:item.color}"
            >
              <!--@click="addSign(item)"-->
              <span v-show="item.shortKey && !isOpenSlot" v-if="false">{{ item.shortKey}}</span>
              {{item.cname}}
            </li>
          </ul>
        </div>
      </div>
      <div
        class="zoom_img_box"
        v-show="zoomPicShow"
        style="width:100%;height:100%;position:fixed;z-index:999;left:0;top:0;background-color: rgba(0,0,0,0.9);"
      >
        <div
          style="width:100%;height:100%;display:flex;justify-content: center;align-items: center;overflow: hidden;"
        >
          <img
            id="drag_img"
            @mousedown.stop="popupDrag"
            @mousemove="popupMove"
            @mousewheel.stop="picMousewheel"
            :src="zoomPicSrc"
            style="width:60%;position:absolute;"
            draggable="false"
          />
        </div>
        <div
          @click="zoomPicShow = false"
          style="width: 40px;height: 40px;background-color: #0080ff;position: absolute;right: 0;top: 0;text-align: center;line-height: 37px;font-size: 38px;font-weight: lighter;color: #fff;cursor: pointer;"
        >×</div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { mapGetters } from "vuex";
import $ from "jquery";
import test from "../assets/js/zoom-marker";

export default {
  name: "ResultPage",
  data() {
    return {
      base: {
        taskId:"",
        markTaskId:"",
        fileId:"",
        step: "",
        lastMarkTaskId: null, // 上次标注的标注任务id 如果是检查任务，该值是标注id，如果是质检任务，可能是检查也可能是标注
        standard: "--" // 标注规范
      },
      componentInfoHeader: {
        // 头部参数
        shortcut: false,
        standard: true,
        history: false,
        repulse: false,
        theme: false
      },
      history:{
          show:false,
          list:[],
          showVersionInfo:false,
          versionData:{},//版本数据
      },
      showHead: true, // 头部是否展示
      theme: false, // 当前皮肤
      shortcutkeys: [], // 快捷键
      info: {}, // 文件基本信息
      all: {}, // 当前任务的全部信息
      files: [], // 全部的文件列表 （图片信息）
      showFiles: [], // 当前展示的文件列表 （图片信息）
      checkList: {}, // 多选的map集合
      checkListNum: 0, // 多选了几张图片
      isCheckBox: false, // 代表是否多选
      isTiling: true, // 是否平铺
      src: "", // 当前选中图片地址
      currentKey: "", // 当前图片的序号，针对所有的图片，而不是展示的
      isOpenSlot: false, // 是否打开筛选标签
      slotSelectType: 1, // 筛选类型
      showType: 0, // 0 全部 1 已经标注 2 未标注
      selectedSlot: [], // 当前选中的slot
      slotList: [], // 标签集合
      colorList: [
        "rgb(0,128,255)",
        "rgb(179,130,0)",
        "rgb(103,96,255)",
        "rgb(39,165,82)",
        "rgb(224,109,135)",
        "rgb(151,164,31)",
        "rgb(121,121,121)",
        "rgb(212,75,22)",
        "rgb(0,119,141)",
        "rgb(155,70,97)",
        "rgb(78,92,181)",
        "rgb(113,105,48)",
        "rgb(182,96,255)",
        "rgb(238,131,22)",
        "rgb(73,121,94)",
        "rgb(74,78,98)",
        "rgb(224,69,216)",
        "rgb(126,71,139)",
        "rgb(178,89,17)",
        "rgb(13,72,219)"
      ], // 颜色集合
      shortKey: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "q",
        "w",
        "e",
        "r",
        "t",
        "a",
        "s",
        "d",
        "f",
        "g"
      ], // 快捷键集合
      slotCache: {}, // 处理过后 便于处理的 标签数据缓存
      shortKeyCache: {}, // 快捷键缓存
      radio: false, // 是否单选
      isSaving: false, // 是否正在保存
      lastSubmit: "", // 上次保存的内容
      checkDataType: 0, // 选择查看的类型
      resultCache: [], // 数据缓存
      zoomPicSrc: "", // 缩放展示图片的路径
      zoomPicShow: false,
      evLeft: "",
      evTop: "",
      scaleS: 1
    };
  },
  components: {
    "header-component": Header
  },
  created: function() {
    $("title").html("图片挑选");
    //获取taskId
    this.base.taskId = this.Utils.getQueryStringArgs()["taskId"];
    //markTaskId
    this.base.markTaskId = this.Utils.getQueryStringArgs()["markTaskId"];
    this.base.fileId = this.Utils.getQueryStringArgs()["fileid"];
  },
  mounted: function() {
    var self = this;
    $(document).ready(function() {
      $("#viewArea").zoomMarker({
        rate: 0.1
      });
    });
    self.init();
  },
  computed: {
    finishNum: function() {
      let self = this;
      // 查看标注完成个数
      var files = self.files,
        len = files.length,
        result = 0;
      if (len === 0) return "--";
      for (var i = 0; i < len; i++) {
        if (files[i].attribute.length > 0) {
          result++;
        }
      }
      return result;
    }
  },
  methods: {
    zoomImgFn: function(src) {
      this.zoomPicSrc = src;
      this.scaleS = 1;
      $("#drag_img").css({
        transform: "scale(1)",
        top: "auto",
        left: "auto"
      });
      this.zoomPicShow = true;
    },
    popupDrag: function() {
      var obj = document.getElementById("drag_img");
      var disX = ev.clientX - obj.offsetLeft;
      var disY = ev.clientY - obj.offsetTop;

      if (obj.setCapture) {
        obj.setCapture();
      }
      document.onmousemove = function() {
        $(obj).css({
          left: ev.clientX - disX + "px",
          top: ev.clientY - disY + "px",
          right: "auto",
          bottom: "auto"
        });
      };

      document.onmouseup = function() {
        document.onmousemove = document.onmouseup = null;
        //释放全局捕获 releaseCapture();
        if (obj.releaseCapture) {
          obj.releaseCapture();
        }
      };

      return false;
    },
    popupMove: function() {
    },
    picMousewheel: function(e) {

      var changeZoom = 1;
      if (e.detail) {
        changeZoom += -(e.detail / 260);
      } else if (e.wheelDelta) {
        changeZoom += e.wheelDelta / 880;
      }
      if (changeZoom < 0.3) {
        // 最小缩放 0.7
        changeZoom = 0.3;
      }
      changeZoom = parseInt(changeZoom * 10) / 10;
      this.scaleS *= changeZoom;
      $("#drag_img").css({
        transform: "scale(" + this.scaleS + ")"
      });
    },
    // 切换数据
    checkData: function(type) {
      let self = this;
      if (self.checkDataType !== type) {
        self.checkDataType = type;
        self.files = self.dataHandle(self.resultCache[type]); // 数据处理增加index等
        self.setShowList();
      }
    },
    // 设置keydown 事件
    setKeyDownEvent: function() {
      let self = this;
      document.addEventListener("keydown", function(e) {
        var e = e || window.event,
          code = e.keyCode || e.which || e.charCode,
          type = e.srcElement ? e.srcElement.className : e.target.className, // 出发所在位置;
          arr = [
            { keyCode: 49, key: "1" },
            { keyCode: 50, key: "2" },
            { keyCode: 51, key: "3" },
            { keyCode: 52, key: "4" },
            { keyCode: 53, key: "5" },
            { keyCode: 81, key: "q" },
            { keyCode: 87, key: "w" },
            { keyCode: 69, key: "e" },
            { keyCode: 82, key: "r" },
            { keyCode: 84, key: "t" },
            { keyCode: 65, key: "a" },
            { keyCode: 83, key: "s" },
            { keyCode: 68, key: "d" },
            { keyCode: 70, key: "f" },
            { keyCode: 71, key: "g" }
          ]; // 快捷键集合

        for (var i = 0; i < arr.length; i++) {
          self.shortKeyStop(e, code, type, arr[i].keyCode, arr[i].key);
        }
      });
    },
    // 阻止事件的封装方法
    shortKeyStop: function() {
    },
    // 多选完成
    completeCheck: function() {
      let self = this;
      self.$set(self, "checkList", {});
      self.isCheckBox = false;
    },
    // 切换选择的数据
    switchType: function(type) {
      let self = this;
      self.showType = Number(type);
      self.setShowList(); // 筛选数据
    },
    // 删除标签
    removeSign: function(key, sign) {
      let self = this;
      var target = self.files[key];
      var index = target.attribute.indexOf(sign);
      if (index > -1) {
        target.attribute.splice(index, 1);
      } else {
        target.attribute.push();
      }
    },
    // 获取标签颜色
    getSignColor: function(sign) {
      let self = this;
      var color = self.slotCache[sign] ? self.slotCache[sign].color : "";
      if (!color) {
        color = "#0080ff";
      }
      return "background:" + color;
    },
    // 添加标签
    addSign: function(item) {
      let self = this;
      if (!self.isOpenSlot) {
        // 没有打开
        self.onlyAddSign(item.ename);
      } else {
        // 打开筛选标签了
        if (self.slotSelectType === 1) {
          // 包含
          self.selectContain(item.ename);
        } else if (self.slotSelectType === 2) {
          // 不包含
          self.selectNoContain(item.ename);
        }
      }
    },
    // 单纯增加标签
    onlyAddSign: function(item) {
      let self = this;
      if (self.currentKey === "" && !self.isCheckBox) {
        // 非多选模式,且无单图出现
        self.$message("请选择将要标记的图片");
        return false;
      }

      if (!item) {
        self.$message.error("无效标签");
        return false;
      }

      if (!self.isCheckBox) {
        // 单图选择
        self.singleSelect(self.currentKey, item);
      } else {
        // 多图选择
        self.multipleSelect(item);
      }
    },
    // 单图选择
    singleSelect: function(key, item) {
      let self = this;
      var target = self.files[key];
      var index = target.attribute.indexOf(item);
      if (index > -1) {
        target.attribute.splice(index, 1);
      } else {
        if (!self.radio) {
          // 多选
          target.attribute.push(item);
        } else {
          target.attribute = [item];
        }
      }
    },
    // 多图选择
    multipleSelect: function(item) {
      let self = this;
      try {
        for (var i in self.checkList) {
          self.singleSelect(self.checkList[i].index, item);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 包含标签筛选
    selectContain: function(item) {
      let self = this;
      self.setSelectedSlot(item);
      self.setShowList();
    },
    // 不包含标签筛选
    selectNoContain: function(item) {
      let self = this;
      self.setSelectedSlot(item);
      self.setShowList();
    },
    // 设置选择的标签
    setSelectedSlot: function(item) {
      let self = this;
      var target = self.selectedSlot;
      var index = target.indexOf(item);
      if (index > -1) {
        target.splice(index, 1);
      } else {
        target.push(item);
      }
    },
    // 打开标签筛选
    openSlot: function() {
      let self = this;
      self.isOpenSlot = !self.isOpenSlot;
      self.selectedSlot = [];
      self.setShowList();
    },
    // 设置当前筛选条件
    setSlotSelectType: function(data) {
      let self = this;
      self.slotSelectType = data;
      self.selectedSlot = [];
      self.setShowList();
    },
    // 根据条件筛选图片 （垃圾代码耦合很高）
    setShowList: function() {
      let self = this;
      var showType = self.showType; // 展示类型
      var isOpenSlot = self.isOpenSlot; // 是否开区筛选
      var slotSelectType = self.slotSelectType; // 筛选的条件
      var showList = [];
      console.log(showType);
      if (showType === 0) {
        // 全部数据
        if (!isOpenSlot) {
          // 未开启
          showList = self.files;
          self.$set(self, "showFiles", showList);
        } else {
          // 开启
          if (slotSelectType === 1) {
            // 拥有标签的时候
            self.getShowData(0, true, 1);
          } else if (slotSelectType === 2) {
            // 不拥有标签的时候
            self.getShowData(0, true, 2);
          }
        }
      } else if (showType === 1) {
        // 已经标注
        if (!isOpenSlot) {
          // 未开启
          self.getShowData(1, false);
        } else {
          // 开启
          if (slotSelectType === 1) {
            // 拥有标签的时候
            self.getShowData(1, true, 1);
          } else if (slotSelectType === 2) {
            // 不拥有标签的时候
            self.getShowData(1, true, 2);
          }
        }
      } else if (showType === 2) {
        // 未标注
        if (!isOpenSlot) {
          // 未开启
          self.getShowData(2, false);
        } else {
          // 开启
          if (slotSelectType === 1) {
            // 拥有标签的时候
            self.getShowData(2, true, 1);
          } else if (slotSelectType === 2) {
            // 不拥有标签的时候
            self.getShowData(2, true, 2);
          }
        }
      }
    },
    // 获取展示的数据 type 全部数据的类型 open  是否开启 selectType 标签数据
    getShowData: function(type, open, selectType) {
      let self = this;
      var data = [];
      var selectedSlot = self.selectedSlot; // 选择的列表
      var need;
      self.files.forEach(function(value) {
        if (type === 0) {
          if (!open) {
            data.push(value);
          } else if (open && selectType === 1) {
            // 开启了，拥有才展示
            need = false;
            value.attribute.forEach(function(item) {
              if (selectedSlot.indexOf(item) > -1) {
                // 如果有
                need = true;
              }
            });
            if (need || selectedSlot.length === 0) {
              // 如果筛选条件为空也展示
              data.push(value);
            }
          } else if (open && selectType === 2) {
            need = true;
            value.attribute.forEach(function(item) {
              if (selectedSlot.indexOf(item) > -1) {
                // 如果有
                need = false;
              }
            });
            if (need) {
              // 因为是不拥有 所以可以不做判断
              data.push(value);
            }
          }
        } else if (type === 1) {
          if (!open) {
            if (value.attribute.length > 0) {
              data.push(value);
            }
          } else if (open && selectType === 1) {
            // 开启了，拥有才展示
            need = false;
            if (value.attribute.length > 0) {
              value.attribute.forEach(function(item) {
                if (selectedSlot.indexOf(item) > -1) {
                  // 如果有
                  need = true;
                }

                if (selectedSlot.length === 0) {
                  // 或者有标签时,晒选条件为空也可以
                  need = true;
                }
              });
            }
            if (need) {
              // 如果筛选条件为空也展示
              data.push(value);
            }
          } else if (open && selectType === 2) {
            need = true;
            if (value.attribute.length > 0) {
              value.attribute.forEach(function(item) {
                if (selectedSlot.indexOf(item) > -1) {
                  // 如果有
                  need = false;
                }
              });
            }
            if (need) {
              data.push(value);
            }
          }
        } else if (type === 2) {
          if (!open) {
            if (value.attribute.length === 0) {
              data.push(value);
            }
          } else if (open && selectType === 1) {
            // 开启了，拥有才展示
            need = false;
            if (value.attribute.length === 0 && selectedSlot.length === 0) {
              // 只有当图片没有属性，且筛选条件为空时
              need = true;
            }
            if (need) {
              // 不可能拥有 || selectedSlot.length === 0 哪怕筛选条件为空 也不能拥有
              data.push(value);
            }
          } else if (open && selectType === 2) {
            // 开启了 ，不拥有
            // need = false;
            if (value.attribute.length === 0) {
              // 因为是未标注 所以只需要这一个条件
              data.push(value);
            }
          }
        }
      });

      self.$set(self, "showFiles", data);
      self.skipShowFirst(); // 自动加载展示数据序列的第一张图片
      return data;
    },
    // 自动加载到 showList中的第一条数据的图片
    skipShowFirst: function() {
      let self = this;
      try {
        var index = self.showFiles[0].index;
        self.$nextTick(function() {
          self.setKey(index);
        });
      } catch (e) {
        console.warn(e);
      }
    },
    // 设置当前图片的index 这个index 是针对所有的图片 而不是 展示的图片 所以取的地址应该是 整个 files 而不是 show
    setKey: function(index) {
      this.currentKey = index;
      this.src = this.files[index].url;
    },
    // 图片加载完毕
    loadImg: function() {
      $("#viewArea").setImgPosition();
    },
    // 多选
    setCheckList: function(e, item) {
      let self = this;
      var checkStatus = e.target.checked;
      if (checkStatus) {
        this.checkList[item.index] = item;
      } else {
        delete this.checkList[item.index];
      }

      var checkAll = JSON.stringify(this.checkList);

      if (checkAll === "{}") {
        this.isCheckBox = false;
      } else {
        this.isCheckBox = true;
      }
      self.computedImg(); // 计算图片的数量
    },
    // 多张图片的数量
    computedImg: function() {
      let self = this;
      try {
        self.checkListNum = Object.keys(self.checkList).length;
      } catch (e) {
        self.checkListNum = 0;
      }
    },
    // 图片代理 (需要增加额外的参数，防止多次重复加载，但是仍然会重复加载两次（可以用骚操作做处理）)
    imgProxy: function(imgData, imgs, index) {
      let self = this;
      if (!imgData.temStatus) {
        // 防止图片重复加载
        var img = new Image();
        img.onload = function() {
          self.$refs[index + 1][0].src = imgs;
          imgData.temStatus = true;
          return imgs;
        };
        img.src = imgs;
        return "/static/images/i_banner.jpg";
      } else {
        return imgs;
      }
    },
    // 初始化
    init: function() {
      let self = this;
      this.Assapi.getResultBySDK(
        {
          taskId: this.base.taskId,
          markTaskId: this.base.markTaskId,
          fileId: this.base.fileId
        },
        function(info) {
          // var info = info.result;

          var results = info.result; //JSON.parse(info.result[0].finalResult.resultText);
          var pageElement = info.pageElement || {};
          pageElement = JSON.parse(pageElement);

          for (var i = 0, length = results.length; i < length; i++) {
            if (Number(results[i].step) == 0) {
              self.base.isMmark = true;
              self.id = results[i].markTaskFileId;
              self.resultCache[i] = JSON.parse(
                results[i].finalResult.resultText
              );
            } else if (Number(results[i].step) == 1) {
              self.base.isCheck = true;
              self.id = results[i].markTaskFileId;
              self.resultCache[i] = JSON.parse(
                results[i].finalResult.resultText
              );
            } else if (Number(results[i].step) == 2) {
              self.base.isQuality = true;
              self.id = results[i].markTaskFileId;
              self.resultCache[i] = JSON.parse(
                results[i].finalResult.resultText
              );
            }
          }

          self.files = self.dataHandle(self.resultCache[0]); // 数据处理增加index等
          self.info = info;
          self.slotList = [
            {
              cname: "a",
              ename: "1"
            },
            {
              cname: "b",
              ename: "2"
            },
            {
              cname: "c",
              ename: "3"
            },
            {
              cname: "d",
              ename: "4"
            },
            {
              cname: "e",
              ename: "5"
            },
            {
              cname: "f",
              ename: "6"
            },
            {
              cname: "g",
              ename: "7"
            },
            {
              cname: "h",
              ename: "8"
            },
            {
              cname: "j",
              ename: "9"
            },
            {
              cname: "k",
              ename: "10"
            },
            {
              cname: "l",
              ename: "11"
            },
            {
              cname: "q",
              ename: "12"
            },
            {
              cname: "w",
              ename: "13"
            },
            {
              cname: "e",
              ename: "14"
            },
            {
              cname: "r",
              ename: "15"
            }
          ];
          self.slotList = pageElement.childLabel
            ? pageElement.childLabel.label
            : []; // 标签
          self.setShowList();
          self.handleSign();
          self.addScroll();
        }
      );
    },
    // 获取结果服务新数据
    getCurrentResult: function() {
      let self = this;
      this.Assapi.getCurrentResult(this.base.taskId, this.base.markTaskId, 0, function(info) {
        info = JSON.parse(info.resultText);
        self.files = self.dataHandle(info);
      });
    },
    // 数据处理增加 index 等
    dataHandle: function(data) {
      let self = this;
      if (Object.prototype.toString.call(data) === "[object Array]") {
        data.forEach(function(item, key) {
          if (item.index === undefined) {
            data[key].index = key;
          }
          if (!item.init) {
            data[key].url = "/v1/css/file/read?path=" + data[key].url; // zx改 不能保存sid 有登录时限校验 导致图片打不开
            data[key].init = true;
          }
          data[key].url = data[key].url.split("&sid")[0]; // zx改 不能保存sid 有登录时限校验 导致图片打不开

          if (item.temStatus) {
            // 设置每一次进来后的初始化
            item.temStatus = undefined;
          }
        });
        return data;
      } else {
        self.$message.error("数据错误");
        return data;
      }
    },
    // 处理 标签颜色
    handleSign: function() {
      let self = this;
      self.slotList.forEach(function(value) {
        // 第一次遍历去重颜色
        if (value.color) {
          var index = self.colorList.indexOf(value.color);
          self.colorList.splice(index, 1);
        }
      });

      self.slotList.forEach(function(value) {
        // 第一次遍历去重颜色
        if (!value.color) {
          if (self.colorList.length >= 1) {
            value.color = self.colorList.pop();
          } else {
            value.color = "rgb(224,109,135)";
          }
        }

        if (self.shortKey.length > 0) {
          // 增加快捷键名称
          value.shortKey = self.shortKey.shift();
          self.shortKeyCache[value.shortKey] = value; // 将快捷键缓存下来
        }

        self.slotCache[value.ename] = {
          color: value.color,
          cname: value.cname
        }; // 将标签数据缓存起来便于处理
      });
    },
    // 加载滚动条
    addScroll: function() {
      // slot-list
      // require(["scrollbar"], function(scrollbar) {
      //   $(".slot-list").mCustomScrollbar({
      //     autoDraggerLength: true,
      //     scrollInertia: 250,
      //     mouseWheelPixels: 60
      //   });
      //   $(".slot-list").mCustomScrollbar("update");
      // });
    },
    // 跳转到指定图片位置
    skipImgPos: function(index) {
      try {
        var box = $(".info-box");
        var top = $("#img" + index).position().top + box.scrollTop();
        box.scrollTop(top);
      } catch (e) {
        console.warn(e);
      }
    },
    // 打回
    repulseMark: function() {},
    // 保存 autoSave 自动保存 async 是否异步 success 成功回调
    save: function() {},
    // 提交
    submit: function() {}
  }
};
</script>